<template>
  <s-layout title="实践团队入驻" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Header Section -->
    <view class="header-section">
      <view class="header-icon">🚩</view>
      <view class="header-title">团队入驻平台</view>
      <view class="header-subtitle">
        欢迎优秀团队和组织入驻文明实践平台
        <br />共同推进新时代文明实践活动，服务社区发展
      </view>
    </view>

    <!-- Team Type Selection -->
    <view class="type-selection">
      <view class="section-title">
        <text class="title-icon">🏷️</text>
        <text class="title-text">团队类型</text>
      </view>
      <view class="type-cards">
        <view
          v-for="type in state.teamTypes"
          :key="type.value"
          :class="['type-card', { active: state.selectedType === type.value }]"
          @tap="state.selectedType = type.value"
        >
          <view class="type-icon">{{ type.icon }}</view>
          <view class="type-name">{{ type.name }}</view>
          <view class="type-desc">{{ type.desc }}</view>
        </view>
      </view>
    </view>

    <!-- Team Information Form -->
    <view class="form-section">
      <view class="section-title">
        <text class="title-icon">📝</text>
        <text class="title-text">团队基本信息</text>
      </view>

      <view class="form-group">
        <text class="form-label">团队名称 *</text>
        <input
          v-model="state.form.name"
          class="form-input"
          placeholder="请输入团队或组织的全称"
        />
      </view>

      <view class="form-row">
        <view class="form-group">
          <text class="form-label">成立时间 *</text>
          <picker mode="date" @change="handleDateChange">
            <view class="form-input picker-input">
              {{ state.form.foundedDate || '请选择' }}
            </view>
          </picker>
        </view>
        <view class="form-group">
          <text class="form-label">团队规模 *</text>
          <picker mode="selector" :range="state.sizeOptions" @change="handleSizeChange">
            <view class="form-input picker-input">
              {{ state.form.size || '请选择' }}
            </view>
          </picker>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">团队简介 *</text>
        <textarea
          v-model="state.form.introduction"
          class="form-textarea"
          placeholder="请详细介绍团队的性质、宗旨、主要业务等"
        ></textarea>
      </view>

      <view class="form-group">
        <text class="form-label">服务领域</text>
        <view class="service-tags">
          <view
            v-for="service in state.serviceOptions"
            :key="service"
            :class="['service-tag', { active: state.form.services.includes(service) }]"
            @tap="toggleService(service)"
          >
            {{ service }}
          </view>
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">团队特色与优势</text>
        <textarea
          v-model="state.form.advantages"
          class="form-textarea"
          placeholder="请描述团队的专业特长、服务优势、成功案例等"
        ></textarea>
      </view>

      <view class="form-group">
        <text class="form-label">服务区域</text>
        <input v-model="state.form.serviceArea" class="form-input" placeholder="主要服务的地区范围" />
      </view>

      <view class="form-group">
        <text class="form-label">组织架构文件</text>
        <view class="upload-area" @tap="handleOrgUpload">
          <text class="upload-icon">📄</text>
          <text class="upload-text">上传团队章程、组织架构等文件</text>
          <view v-if="state.orgFiles.length > 0" class="file-list">
            <view v-for="(file, index) in state.orgFiles" :key="index" class="file-item">
              <text>{{ file }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Contact Information -->
    <view class="contact-section">
      <view class="section-title">
        <text class="title-icon">👤</text>
        <text class="title-text">联系人信息</text>
      </view>

      <view class="form-row">
        <view class="form-group">
          <text class="form-label">负责人姓名 *</text>
          <input v-model="state.form.leaderName" class="form-input" placeholder="团队负责人姓名" />
        </view>
        <view class="form-group">
          <text class="form-label">职务 *</text>
          <input v-model="state.form.leaderTitle" class="form-input" placeholder="在团队中的职务" />
        </view>
      </view>

      <view class="form-row">
        <view class="form-group">
          <text class="form-label">联系电话 *</text>
          <input
            v-model="state.form.phone"
            class="form-input"
            type="number"
            placeholder="手机号码"
          />
        </view>
        <view class="form-group">
          <text class="form-label">邮箱</text>
          <input v-model="state.form.email" class="form-input" placeholder="电子邮箱" />
        </view>
      </view>

      <view class="form-group">
        <text class="form-label">通讯地址</text>
        <input v-model="state.form.address" class="form-input" placeholder="详细地址" />
      </view>

      <view class="form-group">
        <text class="form-label">身份证明</text>
        <view class="upload-area" @tap="handleIdUpload">
          <text class="upload-icon">🆔</text>
          <text class="upload-text">上传负责人身份证、授权书等证明文件</text>
          <view v-if="state.idFiles.length > 0" class="file-list">
            <view v-for="(file, index) in state.idFiles" :key="index" class="file-item">
              <text>{{ file }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Notice Section -->
    <view class="notice-section">
      <view class="section-title">
        <text class="title-icon">📢</text>
        <text class="title-text">入驻须知</text>
      </view>
      <view class="notice-list">
        <view class="notice-item">申请团队须具有合法的组织身份和服务资质</view>
        <view class="notice-item">提交的信息必须真实有效，如有虚假将取消入驻资格</view>
        <view class="notice-item">入驻申请需要经过资格审核和实地考察</view>
        <view class="notice-item">审核周期为7-10个工作日，请耐心等待</view>
        <view class="notice-item">入驻成功后需定期参与平台组织的活动</view>
        <view class="notice-item">团队服务质量将接受平台和用户监督评价</view>
        <view class="notice-item">优秀团队将获得平台推荐和政策支持</view>
      </view>
    </view>

    <!-- Submit Button -->
    <view class="submit-section">
      <button class="submit-btn" @tap="handleSubmit">提交入驻申请</button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  selectedType: 'volunteer',
  teamTypes: [
    { value: 'volunteer', icon: '🤝', name: '志愿服务团队', desc: '专业志愿服务组织' },
    { value: 'cultural', icon: '🎭', name: '文艺团队', desc: '文化艺术表演团体' },
    { value: 'education', icon: '📚', name: '教育培训机构', desc: '专业培训和教育机构' },
    { value: 'medical', icon: '🏥', name: '医疗健康团队', desc: '医疗卫生服务团队' },
    { value: 'tech', icon: '💻', name: '科技服务团队', desc: '科技创新服务组织' },
    { value: 'other', icon: '⭐', name: '其他团队', desc: '其他专业服务团队' }
  ],
  sizeOptions: ['10人以下', '10-50人', '50-100人', '100人以上'],
  serviceOptions: [
    '理论宣讲',
    '教育服务',
    '文化服务',
    '科技服务',
    '健身体育',
    '医疗健康',
    '环保宣传',
    '法律咨询',
    '心理辅导',
    '扶贫助困',
    '敬老助残',
    '其他'
  ],
  orgFiles: [],
  idFiles: [],
  form: {
    name: '',
    foundedDate: '',
    size: '',
    introduction: '',
    services: [],
    advantages: '',
    serviceArea: '',
    leaderName: '',
    leaderTitle: '',
    phone: '',
    email: '',
    address: ''
  }
})

const handleDateChange = (e) => {
  state.form.foundedDate = e.detail.value
}

const handleSizeChange = (e) => {
  state.form.size = state.sizeOptions[e.detail.value]
}

const toggleService = (service) => {
  const index = state.form.services.indexOf(service)
  if (index > -1) {
    state.form.services.splice(index, 1)
  } else {
    state.form.services.push(service)
  }
}

const handleOrgUpload = () => {
  uni.chooseFile({
    count: 5,
    extension: ['.pdf', '.doc', '.docx', '.jpg', '.png'],
    success: (res) => {
      state.orgFiles = res.tempFilePaths.map((path) => path.split('/').pop())
      uni.showToast({
        title: `已选择${res.tempFilePaths.length}个文件`,
        icon: 'success'
      })
    },
    fail: () => {
      // Fallback to image picker
      uni.chooseImage({
        count: 5,
        success: (res) => {
          state.orgFiles = res.tempFilePaths.map((path) => path.split('/').pop())
          uni.showToast({
            title: `已选择${res.tempFilePaths.length}个文件`,
            icon: 'success'
          })
        }
      })
    }
  })
}

const handleIdUpload = () => {
  uni.chooseImage({
    count: 5,
    success: (res) => {
      state.idFiles = res.tempFilePaths.map((path) => path.split('/').pop())
      uni.showToast({
        title: `已选择${res.tempFilePaths.length}个文件`,
        icon: 'success'
      })
    }
  })
}

const validateForm = () => {
  if (!state.form.name) {
    uni.showToast({ title: '请输入团队名称', icon: 'none' })
    return false
  }
  if (!state.form.foundedDate) {
    uni.showToast({ title: '请选择成立时间', icon: 'none' })
    return false
  }
  if (!state.form.size) {
    uni.showToast({ title: '请选择团队规模', icon: 'none' })
    return false
  }
  if (!state.form.introduction) {
    uni.showToast({ title: '请输入团队简介', icon: 'none' })
    return false
  }
  if (!state.form.leaderName) {
    uni.showToast({ title: '请输入负责人姓名', icon: 'none' })
    return false
  }
  if (!state.form.leaderTitle) {
    uni.showToast({ title: '请输入负责人职务', icon: 'none' })
    return false
  }
  if (!state.form.phone || !/^1[3-9]\d{9}$/.test(state.form.phone)) {
    uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
    return false
  }
  return true
}

const handleSubmit = () => {
  if (!validateForm()) {
    return
  }

  const typeNames = {
    volunteer: '志愿服务团队',
    cultural: '文艺团队',
    education: '教育培训机构',
    medical: '医疗健康团队',
    tech: '科技服务团队',
    other: '其他团队'
  }

  uni.showModal({
    title: '确认提交',
    content: `您正在申请团队入驻，团队类型：${typeNames[state.selectedType]}，确认提交申请吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '提交中...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showModal({
            title: '入驻申请提交成功',
            content: `团队类型：${typeNames[state.selectedType]}\n服务领域：${state.form.services.join('、')}\n\n我们将在7-10个工作日内完成审核。\n审核过程中可能需要实地考察，请保持联系方式畅通。`,
            showCancel: false,
            success: () => {
              sheep.$router.back()
            }
          })
        }, 1500)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.header-section {
  background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
  padding: 60rpx 40rpx;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 400rpx;
    height: 400rpx;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    top: -200rpx;
    right: -100rpx;
    border-radius: 50%;
  }

  .header-icon {
    width: 160rpx;
    height: 160rpx;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72rpx;
    margin: 0 auto 40rpx;
    box-shadow: 0 16rpx 40rpx rgba(255, 107, 0, 0.3);
  }

  .header-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ff6b00;
    margin-bottom: 20rpx;
  }

  .header-subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}

.type-selection,
.form-section,
.contact-section,
.notice-section {
  background: white;
  margin: 30rpx;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 30rpx;

    .title-icon {
      font-size: 36rpx;
    }

    .title-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.type-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .type-card {
    background: #f8f9fa;
    border-radius: 20rpx;
    padding: 30rpx;
    text-align: center;
    border: 4rpx solid transparent;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #fff3e0, #ffecb3);
      border-color: #ff6b00;
      transform: translateY(-4rpx);
    }

    .type-icon {
      width: 80rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      margin: 0 auto 16rpx;
    }

    .type-name {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
      display: block;
    }

    .type-desc {
      font-size: 22rpx;
      color: #666;
      line-height: 1.3;
    }
  }
}

.form-group {
  margin-bottom: 32rpx;

  .form-label {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }

  .form-input,
  .form-textarea {
    width: 100%;
    padding: 24rpx 30rpx;
    border: 4rpx solid #f0f2f5;
    border-radius: 16rpx;
    font-size: 28rpx;
    background: #f8f9fa;
    transition: all 0.3s;

    &:focus {
      border-color: #ff6b00;
      background: white;
    }
  }

  .picker-input {
    display: flex;
    align-items: center;
    color: #333;
  }

  .form-textarea {
    min-height: 160rpx;
    resize: vertical;
  }
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 16rpx;

  .service-tag {
    padding: 12rpx 24rpx;
    background: #f0f2f5;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
    }
  }
}

.upload-area {
  border: 4rpx dashed #ddd;
  border-radius: 16rpx;
  padding: 60rpx;
  text-align: center;
  transition: all 0.3s;

  &:active {
    border-color: #ff6b00;
    background: #fff3e0;
  }

  .upload-icon {
    font-size: 72rpx;
    color: #999;
    margin-bottom: 20rpx;
    display: block;
  }

  .upload-text {
    font-size: 28rpx;
    color: #666;
  }

  .file-list {
    margin-top: 20rpx;
    text-align: left;

    .file-item {
      padding: 12rpx;
      background: #f0f2f5;
      border-radius: 8rpx;
      margin-bottom: 8rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.notice-list {
  .notice-item {
    position: relative;
    padding-left: 32rpx;
    margin-bottom: 20rpx;
    font-size: 26rpx;
    line-height: 1.5;
    color: #666;

    &::before {
      content: '•';
      position: absolute;
      left: 0;
      color: #ff6b00;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}

.submit-section {
  padding: 40rpx 30rpx;

  .submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border: none;
    padding: 28rpx;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 1.2;
    box-shadow: 0 8rpx 24rpx rgba(255, 107, 0, 0.3);
    transition: all 0.3s;
  }

  .submit-btn::after {
    border: none;
  }
}
</style>
